<div class="alert alert-warning" role="alert"
  *ngIf="!isCoursesLoading && courseCandidates.length === 0 && !hasCourseLoadingFailed">
  You have not created any courses yet, or you have no active courses. Go <a
    tmRouterLink="/web/instructor/courses">here</a> to create or unarchive a course.
</div>

<div>
  <button id="btn-add-session" class="btn btn-success" (click)="isSessionEditFormExpanded = true"
    [disabled]="isSessionEditFormExpanded || isCoursesLoading"><i class="fas fa-plus"></i> Add New Feedback Session
  </button>
</div>

<div id="add-session-section" class="margin-top-30px" *ngIf="isSessionEditFormExpanded && !isCoursesLoading"
  @collapseAnim>
  <div>
    <tm-session-edit-form [formMode]="SessionEditFormMode.ADD" [(model)]="sessionEditFormModel" (modelChange)="triggerModelChange($event)"
      [courseCandidates]="courseCandidates" [templateSessions]="templateSessions"
      [isCopyOtherSessionLoading]="isCopyOtherSessionLoading" (addNewSessionEvent)="addNewSessionHandler()"
      (copyOtherSessionsEvent)="copyFromOtherSessionsHandler()"
      (closeEditFormEvent)="isSessionEditFormExpanded = false"></tm-session-edit-form>
  </div>
</div>

<tm-loading-retry [shouldShowRetry]="hasCourseLoadingFailed || hasFeedbackSessionLoadingFailed"
  [message]="'Failed to load data'" (retryEvent)="retryLoadingAllData()">
  <div class="margin-top-30px">
    <div *tmIsLoading="isCoursesLoading || isMoveToRecycleBinLoading || isCopySessionLoading || isResultActionLoading"
      class="table-responsive">
      <div class="alert alert-warning margin-top-30px" role="alert"
        *ngIf="sessionsTableRowModels.length === 0 && !isFeedbackSessionsLoading">
        You have not created any sessions yet. Use the form above to create a session.
      </div>
      <tm-sessions-table
        id="sessions-table"
        *tmIsLoading="isFeedbackSessionsLoading"
        [sessionsTableRowModels]="sessionsTableRowModels"
        [courseCandidates]="courseCandidates"
        [columnsToShow]="[SessionsTableColumn.COURSE_ID]"
        [headerColorScheme]="SortableTableHeaderColorScheme.BLUE"
        [isSendReminderLoading]="isSendReminderLoading"
        (sortSessionsTableRowModelsEvent)="sortSessionsTableRowModelsEvent($event)"
        (loadResponseRateEvent)="loadResponseRateEventHandler($event)"
        (moveSessionToRecycleBinEvent)="moveSessionToRecycleBinEventHandler($event)"
        (copySessionEvent)="copySessionEventHandler($event)"
        (submitSessionAsInstructorEvent)="submitSessionAsInstructorEventHandler($event)"
        (publishSessionEvent)="publishSessionEventHandler($event)"
        (unpublishSessionEvent)="unpublishSessionEventHandler($event)"
        (downloadSessionResultsEvent)="downloadSessionResultEventHandler($event)"
        (resendResultsLinkToStudentsEvent)="resendResultsLinkToRespondentsEventHandler(sessionsTableRowModels[$event])"
        (sendRemindersToAllNonSubmittersEvent)="sendRemindersToRespondentsEventHandler(sessionsTableRowModels[$event], true)"
        (sendRemindersToSelectedNonSubmittersEvent)="sendRemindersToRespondentsEventHandler(sessionsTableRowModels[$event], false)"></tm-sessions-table>
    </div>
  </div>
  <br />

  <div class="row">
    <div class="col-12 text-muted">
      <p>
        Note: The table above doesn't contain sessions from archived courses and courses in recycle bin.
        To view sessions from an archived course, unarchive the course first; to view sessions from a course in recycle
        bin, restore the course first.
      </p>
    </div>
  </div>

  <div class="margin-top-30px">
    <tm-sessions-recycle-bin-table *tmIsLoading="isRecycleBinLoading || isRestoreFeedbackSessionLoading"
      [isRecycleBinExpanded]="isRecycleBinExpanded"
      [recycleBinFeedbackSessionRowModels]="recycleBinFeedbackSessionRowModels"
      [recycleBinFeedbackSessionRowModelsSortBy]="recycleBinFeedbackSessionRowModelsSortBy"
      [recycleBinFeedbackSessionRowModelsSortOrder]="recycleBinFeedbackSessionRowModelsSortOrder"
      [isPermanentDeleteLoading]="isPermanentDeleteLoading"
      (restoreSessionEvent)="restoreRecycleBinFeedbackSession($event)"
      (restoreAllRecycleBinFeedbackSessionEvent)="restoreAllRecycleBinFeedbackSession()"
      (permanentlyDeleteSessionEvent)="permanentDeleteSession($event)"
      (permanentDeleteAllSessionsEvent)="permanentDeleteAllSessions()"
      (sortRecycleBinFeedbackSessionRowsEvent)="sortRecycleBinFeedbackSessionRowsEvent($event)"
      (recycleBinExpandEvent)="isRecycleBinExpanded = !isRecycleBinExpanded;">
    </tm-sessions-recycle-bin-table>
  </div>
</tm-loading-retry>

<ng-template #modifiedTimestampsModal>
  <tm-modified-timestamps-modal [coursesOfModifiedSession]="this.coursesOfModifiedSession"
    [modifiedSessions]="this.modifiedSession">
  </tm-modified-timestamps-modal>
</ng-template>
